<template>
  <view class="container">
	  <view class="top_tip">
	  	<image src="/static/index/gonggao.png" style="width: 36rpx;height: 36rpx;margin-right: 14rpx;"></image>
	  	稳定快速，不卡顿
	  </view>
    <view class="add_box" v-if="show_add">
		<view class="add_main">
			<view style="display: flex;flex-direction: column;align-items: center;" @click="gotoPage('/pages/index/add',2)">
				<view><image src="/static/index/add.png" style="width: 140rpx;height: 140rpx;"></image></view>
				<view><text class="add_btn">点击添加云机</text></view>
			</view>
		</view>
	</view>
	
	<view v-if="!show_add">
		
		<swiper :indicator-dots="true"  circular :autoplay="true" interval="3500" duration="500" class="swiper-box2" :style="{ height: swiperHeight + 'px' }">
			<swiper-item v-for="(item,index) in orderList" :key="index">
			　　<image :src="phone_bg + '?t=' + Date.now()" @click="gotoLogin(item.id)" mode="widthFix" class="banner-img" :id="'wrap' + index" @load="setSwiperHeight()"></image>
				<view class="time_info">
					<view>到期时间：{{item.end_time}}</view>
					<view class="xufei_btn" @click="xufeiFunc(item.id,item.package_id)">续费</view>
				</view>
			</swiper-item>
		</swiper>
		
		
	</view>
    <view style="height: 60rpx;"></view>
  </view>
</template>

<script>

import {getPhone,getsysData } from '@/api/index.js';
import {authlogin } from '@/api/order.js';

import baseUrl from '@/utils/siteInfo.js';
export default {
  components: {
		
   },
  data() {
    return {
	   logo_url: baseUrl.imgroot + '/static/picture/cropped-space.jpeg',
	   phone_bg: baseUrl.imgroot + '/static/images/phone_bg.jpg',
      systemLocale: '',
      applicationLocale: '',

      sysData:{},
	  orderList:[],
	  swiperHeight:500,
	  isUserLogin:false,
	  show_add:true
    }
  },
  computed:{

  },
  onLoad() {

  },
  onShow(){
	  this.isUserLogin = this.$user.isLogin();
    let systemInfo = uni.getSystemInfoSync();
    this.systemLocale = systemInfo.language;
    this.applicationLocale = uni.getLocale();
    console.log("語言",uni.getLocale(),this.systemLocale);
	if(this.isUserLogin){
		this.getPhoneFunc();
	}
  },
  methods: {
    getSysFunc(){
      getsysData().then(res=>{
        if (res.code == 0) {
          this.sysData = res.data
        }
      })
    },
	getPhoneFunc(){
		getPhone().then(res=>{
			if (res.code == 0) {
			  this.orderList = res.data
			  if(res.data.length > 0){
				  this.show_add = false;
				  /* this.$nextTick(() => { // 确保DOM更新
					this.setSwiperHeight();
				  }); */
			  }
			}
		})
	},
    gotoPage(url,type =1){
      if(type == 1){
        uni.navigateTo({
          url:url
        })
      }else{
        uni.switchTab({
        	url:url
        })
      }

    },
	makeCall(){
		uni.makePhoneCall({
			phoneNumber:this.sysData.kefu_phone
		})
	},
	setSwiperHeight() {
	  const element = "#wrap0";
	  const query = uni.createSelectorQuery().in(this);
	  query.select(element).boundingClientRect();
	  query.exec(res => {
		  console.log('计算',res)
		if (res && res[0]) this.swiperHeight = res[0].height+65;
		 if( this.swiperHeight < 200){
			  this.swiperHeight = 500;
		 }
	  });
	},
	gotoLogin(order_id){
		uni.showLoading({
			title:"正在登录"
		});
		authlogin({order_id:order_id}).then(res=>{
			uni.hideLoading();
			if(res.code == 0){
				var loginurl = res.data.phoneurl;
				uni.navigateTo({
				  url: '/pages/index/loginphone?url=' + encodeURIComponent(loginurl)
				});
			}else{
				uni.$u.toast(res.msg)
			}
			
		});
		
	},
	xufeiFunc(order_id,package_id){
		uni.navigateTo({
		  url: `/pages/index/xufei?order_id=${order_id}&package_id=${package_id}`
		});
	}
  }
}
</script>

<style>
page{

  font-family: "Roboto", Sans-serif;
  /* background: #e1e1e1; */
}
.add_box{
	padding: 36rpx;
}
.add_main{
	height: 80vh;
	width: 100%;
	border: 2rpx solid #eaf1fb;
	background-color: #f6faff;
	border-radius: 44rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.add_main .add_btn{
	font-size: 30rpx;
	color: #746ef6;
	margin-top: 6rpx;
}
.top_tip{
	padding: 22rpx 32rpx;
	background-color: #ffedda;
	font-size: 28rpx;
	color: #f5993c;
	display: flex;
	align-items: center;
}
.time_info{
	display: flex;
	justify-content: space-between;
	padding: 10rpx 56rpx;
	font-size: 24rpx;
	align-items: center;
}
.banner-img{
	height: auto;
	width: 100%;
}
.uni-swiper {
    display: block;
    height: auto !important;      // 或者设置为auto
}
.xufei_btn{
	padding: 12rpx 40rpx;
	background-color: #746ef6;
	color: #fff;
	border-radius: 30rpx;
}
</style>
